﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>在线文字转语音</title>
    <link href="../Scripts/Editor/LayUI/css/layui.css" rel="stylesheet" />
    <script src="../Scripts/Vue/axios.min.js"></script>
    <script src="../Scripts/Vue/vue.min.js"></script>
    <script src="../Scripts/Editor/Ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Scripts/Editor/Ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Scripts/Editor/Ace/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Scripts/Editor/Ace/mode-json.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Scripts/Editor/LayUI/layui.js"></script>
    <style>
        #error {
            font-family: "Verdana";
            font-weight: normal;
            font-size: .7em;
            color: black;
            margin: 8px;
            padding: 5px;
        }

        p {
            font-family: "Verdana";
            font-weight: normal;
            color: black;
            margin-top: -5px
        }

        b {
            font-family: "Verdana";
            font-weight: bold;
            color: black;
            margin-top: -5px
        }

        H1 {
            font-family: "Verdana";
            font-weight: normal;
            font-size: 18pt;
            color: red
        }

        H2 {
            font-family: "Verdana";
            font-weight: normal;
            font-size: 14pt;
            color: maroon
        }

        pre {
            font-family: "Consolas","Lucida Console",Monospace;
            font-size: 11pt;
            margin: 0;
            padding: 0.5em;
            line-height: 14pt
        }

        .marker {
            font-weight: bold;
            color: black;
            text-decoration: none;
        }

        .version {
            color: gray;
        }

        .error {
            margin-bottom: 10px;
        }

        .expandable {
            text-decoration: underline;
            font-weight: bold;
            color: navy;
            cursor: pointer;
        }

        @media screen and (max-width: 639px) {
            pre {
                width: 440px;
                overflow: auto;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
        }

        @media screen and (max-width: 479px) {
            pre {
                width: 280px;
            }
        }
    </style>
    <script type="text/javascript">   
        var header = { "auth": "jhecis" };
        var Vueapp;
        //url地址获取
        function GetGuDing(Ext) {
            var Curpath = window.document.location.href;
            var rootpath = Curpath.split("//")[0] + "//" + Curpath.split("//")[1].split("/")[0];
            console.log(rootpath);
            var InterFaceUrl = rootpath + Ext;
            console.log(InterFaceUrl);
            return InterFaceUrl;
        } 
        //播放音频
        function PlayAudio(text)
        {
            axios({
                method: 'get',
                url: GetGuDing('/api/InterfaceTool/Text2Vocie?text=' + text),
                headers: header,
                responseType: 'json'
            }).then(function (response) {
                console.log(response);
                var res = response.data.data.ReturnData;
                console.log(res);
                document.getElementsByTagName("audio")[0].setAttribute("src", "data:audio/mp3;base64," + res);
            }).catch(function (error) {
                console.log('转换失败' + error);
            });

        }
      

        //界面完毕
        window.onload = function () {
          
            layui.use('layer', function () {
                layer = layui.layer;
            });
            //根节点
            Vueapp = new Vue({
                el: "#app",
                data: {
                    SearchText: ""
                },
                methods: {
                    onConvert: function (obj) {
                        PlayAudio(this.SearchText);
                    }, onSearch: function (o) {
                        
                    }
                }
            })
            //加载完毕
        };

    </script>
</head>
<body>
    <div id="app">
        <div class="layui-row grid-demo grid-demo-bg1">
            <div class="layui-col-md12">
                <div class="grid-demo grid-demo-bg2">
                    <div class="layui-panel">
                        <div style="height: 80px;">
                            <label>文字： </label>
                            <input placeholder="请输入文字" v-model="SearchText" />
                            <button class="layui-btn layui-btn-sm " @click="onConvert">转换</button>
                            <audio style="display:none;" controls="controls" autoplay />
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
       
    </div>

</body>
</html>